<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%-- <%@ tablib prefix="fmt" uri=http://java.sun.com/jstl/fmt_rt %> --%>


<%-- <link href="<c:url value="/resources/jQuery-File-Upload-master/css/bootstrap.min.css" />" rel="stylesheet"  type="text/css" /> --%>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="<c:url value="/resources/jQuery-File-Upload-master/css/style.css" />" rel="stylesheet" type="text/css" />

<link href="<c:url value="/resources/jQuery-File-Upload-master/css/blueimp-gallery.min.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/jQuery-File-Upload-master/css/jquery.fileupload.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/jQuery-File-Upload-master/css/jquery.fileupload-ui.css" />" rel="stylesheet" type="text/css" />










<jsp:useBean id="now" class="java.util.Date" />
<%-- <fmt:formatDate value="${now}" pattern="yyyy-MM-dd a hh:mm" var="today" />  --%>
<fmt:formatDate value="${now}" pattern="yyyyMMdd" var="today" />

<c:if test="${!ajaxRequest}">
	<html>
<head>
<title>fileupload | mvc-showcase</title>
<link href="<c:url value="/resources/form.css" />" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<c:url value="/resources/jquery/1.6/jquery.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/jqueryform/2.8/jquery.form.js" />"></script>
</head>
<body>
</c:if>


<div id="fileuploadContent">
	<h2>File Upload</h2>
	<p>
		See the
		<code>org.springframework.samples.mvc.fileupload</code>
		package for the @Controller code
	</p>
	<!--
		    File Uploads must include CSRF in the URL.
		    See http://docs.spring.io/spring-security/site/docs/3.2.x/reference/htmlsingle/#csrf-multipart
		-->
	<c:url var="actionUrl" value="fileupload?${_csrf.parameterName}=${_csrf.token}" />
	<c:url var="actionUrlForAjax" value="fileuploadForAjax?${_csrf.parameterName}=${_csrf.token}" />
	<div id="fileinfo">pageContext.request.contextPath=${pageContext.request.contextPath}</div>
	<h1>file upload submit</h1>
	<form id="fileuploadForm" action="${actionUrl}" method="POST" enctype="multipart/form-data" class="cleanform">
		<div class="header">
			<h2>Form</h2>
			<c:if test="${not empty message}">
				<div id="message" class="success">${message}</div>
				<c:forEach var="file" items="${uploadedFileNames}">
					<!-- 					업로드된 파일 갯수만큼 다운로드 링크를 만든다 -->
					<%-- 					<a href="/download?path=&key="><img src="<c:url value="/resources/${usrUploadDir}/${file}" />"  width="200" /></a> --%>
					<c:choose>
						<c:when test="${fn:startsWith(osName, 'Windows')==false}">
							<a href="<c:url value="/download?path=&key=" />">${today }<img src="http://lsv400.iptime.org/${usrUploadDir}/${file}" width="200" /></a>
						</c:when>
						<c:otherwise>
							<%-- 							<a href="<c:url value="/download?path=&key=" />">${today }<img src="<c:url value="/resources/${usrUploadDir}/${file}" />"  width="200" /></a> --%>
							<a href="<c:url value="/download?path=&key=" />">${today }<img src="http://127.0.0.1:5350/${usrUploadDir}/${file}" width="200" /></a>
						</c:otherwise>
					</c:choose>

				</c:forEach>
			</c:if>
		</div>
		<div>
			<input id="addFile" type="button" value="Add File" /> <label for="file">File</label>
		</div>
		<input id="file" type="file" name="file" multiple="multiple" />
		<div id="fileTable"></div>
		<!-- 			<p><button type="submit">Upload</button></p>		 -->
		<p>
			<input type="submit" value="Upload" />
		</p>
	</form>
	<h1>file upload ajax submit</h1>
	<form id="ajaxuploadform" method="post" name="ajaxuploadform" class="cleanform" action="${actionUrlForAjax}" enctype="multipart/form-data">
		<div>
			<input id="addFile2" type="button" value="Add File" /> <label for="file">File</label>
		</div>
		<input id="file" type="file" name="file" multiple="multiple" />
		<div id="fileTable2"></div>
	</form>
	<!-- 	<button value="Submit" onclick="uploadJqueryForm()">Upload</button> -->
	<!-- 	<i>Using JQuery Form Plugin</i><br /> -->
	<button value="Submit" onclick="uploadFormData()">Upload</button>
	<i>Using FormData Object</i>
	<div id="result"></div>
	<div id="before"></div>
	<div id="after"></div>
	<div id="imglink"></div>
</div>


<div class="container">
	<h3>jQuery File Upload Demo</h3>
	<!-- The file upload form used as target for the file upload widget -->
	<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
		<!-- Redirect browsers with JavaScript disabled to the origin page -->
		<noscript>
			<input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/">
		</noscript>
		<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
		<div class="row fileupload-buttonbar">
			<div class="col-lg-7">
				<!-- The fileinput-button span is used to style the file input field as button -->
				<span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>Add files...</span>
				                     <input type="file" name="files[]" multiple> 
<!-- 				 <input type="file" name="files" multiple> -->
				</span>
				<button type="submit" class="btn btn-primary start">
					<i class="glyphicon glyphicon-upload"></i> <span>Start upload</span>
				</button>
				<button type="reset" class="btn btn-warning cancel">
					<i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel upload</span>
				</button>
				<button type="button" class="btn btn-danger delete">
					<i class="glyphicon glyphicon-trash"></i> <span>Delete</span>
				</button>
				<input type="checkbox" class="toggle">
				<!-- The global file processing state -->
				<span class="fileupload-process"></span>
			</div>
			<!-- The global progress state -->
			<div class="col-lg-5 fileupload-progress fade">
				<!-- The global progress bar -->
				<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
					<div class="progress-bar progress-bar-success" style="width: 0%;"></div>
				</div>
				<!-- The extended global progress state -->
				<div class="progress-extended">&nbsp;</div>
			</div>
		</div>
		<!-- The table listing the files available for upload/download -->
		<table role="presentation" class="table table-striped">
			<tbody class="files"></tbody>
		</table>
	</form>

	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">Demo Notes</h3>
		</div>
		<div class="panel-body">
			<ul>
				<li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).
				</li>
				<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).
				</li>
				<li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).
				</li>
				<li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).
				</li>
				<li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.
				</li>
				<li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.
				</li>
			</ul>
		</div>
	</div>
</div>


<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
	<div class="slides"></div>
	<h3 class="title"></h3>
	<a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a>
	<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> -->
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/vendor/jquery.ui.widget.js" />"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/JavaScript-Templates/tmpl.min.js" />"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/JavaScript-Load-Image/load-image.min.js" />"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js" />"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/bootstrap/bootstrap.min.js" />"></script>
<!-- blueimp Gallery script -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/Gallery/jquery.blueimp-gallery.min.js" />"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->


<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.iframe-transport.js" />"></script>
<!-- The basic File Upload plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload.js" />"></script>
<!-- The File Upload processing plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-process.js" />"></script>
<!-- The File Upload image preview & resize plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-image.js" />"></script>
<!-- The File Upload audio preview plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-audio.js" />"></script>
<!-- The File Upload video preview plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-video.js" />"></script>
<!-- The File Upload validation plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-validate.js" />"></script>
<!-- The File Upload user interface plugin -->
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/jquery.fileupload-ui.js" />"></script>
<!-- The main application script -->
<%-- <script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/main.js" />"></script> --%>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script type="text/javascript" src="<c:url value="/resources/jQuery-File-Upload-master/js/cors/jquery.xdr-transport.js" />"></script>
<![endif]-->




<
<script type="text/javascript">
	// main.js 재정의
	/*
	 * jQuery File Upload Plugin JS Example 8.9.1
	 * https://github.com/blueimp/jQuery-File-Upload
	 *
	 * Copyright 2010, Sebastian Tschan
	 * https://blueimp.net
	 *
	 * Licensed under the MIT license:
	 * http://www.opensource.org/licenses/MIT
	 */

	/* global $, window */

	$(function() {
		'use strict';

		// Initialize the jQuery File Upload widget:
		$('#fileupload').fileupload({
			// Uncomment the following to send cross-domain cookies:
			//xhrFields: {withCredentials: true},
			//         url: 'server/php/'
			//         url: 'fileuploadForAjax?${_csrf.parameterName}=${_csrf.token}'
			//         url: 'fileupload?${_csrf.parameterName}=${_csrf.token}'
			url : 'fileuploadForAjax2?${_csrf.parameterName}=${_csrf.token}'
		});

		// Enable iframe cross-domain access via redirect option:
		$('#fileupload').fileupload('option', 'redirect', window.location.href.replace(/\/[^\/]*$/, '/cors/result.html?%s'));

		if (window.location.hostname === 'blueimp.github.io') {
			// Demo settings:
			$('#fileupload').fileupload('option', {
				url : '//jquery-file-upload.appspot.com/',
				// Enable image resizing, except for Android and Opera,
				// which actually support image resizing, but fail to
				// send Blob objects via XHR requests:
				disableImageResize : /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
				maxFileSize : 5000000,
				acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i
			});
			// Upload server status check for browsers with CORS support:
			if ($.support.cors) {
				$.ajax({
					url : '//jquery-file-upload.appspot.com/',
					type : 'HEAD'
				}).fail(function() {
					$('<div class="alert alert-danger"/>').text('Upload server currently unavailable - ' + new Date()).appendTo('#fileupload');
				});
			}
		} else {
			// Load existing files:
			$('#fileupload').addClass('fileupload-processing');
			$.ajax({
				// Uncomment the following to send cross-domain cookies:
				//xhrFields: {withCredentials: true},
				url : $('#fileupload').fileupload('option', 'url'),
				dataType : 'json',
				context : $('#fileupload')[0]
			}).always(function() {
				$(this).removeClass('fileupload-processing');
			}).done(function(result) {
				$(this).fileupload('option', 'done').call(this, $.Event('done'), {
					result : result
				});
			});
		}

	});
</script>

<script type="text/javascript">
	//using jquery.form.js
	function uploadJqueryForm() {
		alert('stop');
		return;
		$('#result').html('');

		$("#form2").ajaxForm({
			success : function(data) {
				$('#result').html(data);
			},
			dataType : "text"
		}).submit();
	}

	//using FormData() object
	function uploadFormData() {
		// 		alert('ajax start...');
		$('#result').html('');

		var ajaxuploadform = new FormData(document.getElementById('ajaxuploadform'));
		// 	  oMyForm.append("file", file2.files[0]);

		$.ajax({
			url : '${actionUrlForAjax}',
			//         enctype : 'multipart/form-data',
			data : ajaxuploadform,
			dataType : 'text',
			processData : false,
			contentType : false,
			type : 'POST',
			success : function(data) {
				// 	      $('#result').html(data);
				// [
				//  {"id":"3","contentType":"image/jpeg"
				// 	,"contentLength":780831
				// 	,"fileName":"Koala.jpg"
				// 	,"fileInfo":"file info: 3(id) file(name) image/jpeg(type) 780831(size)"
				// 	}
				// ]

				var test = '${usrUploadDir}';
				// alert(test);
				var list = $.parseJSON(data);
				var listLen = list.length;
				var contentStr = "";
				var imglink = "";
				for (var i = 0; i < listLen; i++) {
					contentStr += "[" + list[i].id + "(seq) " + list[i].contentType + "(type ) " + list[i].contentLength + "(size ) " + list[i].fileName + "(filename ) " + list[i].fileInfo + "(fileinfo)" + "]";

					imglink +=
					//                  "<img src="http://127.0.0.1:5350/${usrUploadDir}/${file}"  width="200" />"
					//                  '<img src="http://127.0.0.1:5350/upload/${today }/'+list[i].fileName+'"  width="200" /><br />';
					'<img src="http://127.0.0.1:5350/upload/${today }/'+list[i].fileName+'"  width="200" />';

				}
				$("#before").append(data);
				$("#after").append(contentStr);
				$("#imglink").append(imglink);

			},
			error : function(data) {
				alert("error");
			}
		});
	}
</script>








<script type="text/javascript">
	$(document).ready(function() {
		$('<input type="hidden" name="ajaxUpload" value="true" />').insertAfter($("#file"));
		$("#fileuploadForm").ajaxForm({
			success : function(html) {
				$("#fileuploadContent").replaceWith(html);
			}
		});

		$('#addFile').click(function() {
			$('#fileTable').append('<input type="file" name="file" multiple="multiple" />');
		});
		$('#addFile2').click(function() {
			$('#fileTable2').append('<input type="file" name="file" multiple="multiple" />');
		});
	});
</script>

















<!-- 	</div> -->


















<c:if test="${!ajaxRequest}">
	</body>
	</html>
</c:if>